<html>
<head>
  <script>var isomorphicDir="../isomorphic/";</script>
  <script src="../isomorphic/system/development/ISC_Core.js"></script>
  <script src="../isomorphic/system/development/ISC_Foundation.js"></script>
  <script src="../isomorphic/system/development/ISC_Containers.js"></script>
  <script src="../isomorphic/system/development/ISC_Grids.js"></script>
  <script src="../isomorphic/system/development/ISC_Forms.js"></script>
  <script src="../isomorphic/system/development/ISC_DataBinding.js"></script>
  <script src="../isomorphic/skins/Enterprise/load_skin.js"></script>
</head>
<body>
<script>
isc.defineClass("DragPieceShort", "Img").addProperties({
    width:418, height:24,
    layoutAlign:"center",
    canDragReposition:true,
    canDrop:true,
    dragAppearance:"target",
    appImgDir:"",
    dragType:"3"
})

isc.defineClass("DragPieceLarge", "Img").addProperties({
    width:836, height:24,
    layoutAlign:"center",
    canDragReposition:true,
    canDrop:true,
    dragAppearance:"target",
    appImgDir:"",
    dragType:"6"
})

isc.defineClass("RowContainer", "HStack").addProperties({
    left:475,
    showEdges:false,
    height: 7,
    width:836,
    border: 0,
    membersMargin:0,  layoutMargin: 1,
    canAcceptDrop:true,
    animateMembers:true,
    dropLineThickness:5,
    dropTypes:['0'],
    drop: "onDrop(this)",
    isFirstDropOver: true,
    draggedIsMember: false,
    dropOver : function () {
      if (this.isFirstDropOver = true) {
        this.isFirstDropOver = false;
        this.draggedIsMember = false;
        element = isc.Event.getDragTarget();
        var rowLength = 0;
        var memberLength = 0;
        for (i=0; i< this.getMembers().length; i++) {
          memberLength = this.getMembers()[i].dragType;
          if (typeof memberLength != 'undefined') {
            memberLength = parseInt(memberLength);
          } else {
            memberLength = 0;
          }
          rowLength += memberLength;
          if(this.getMembers()[i].ID.indexOf("LayoutSpacer") != -1) {
            this.draggedIsMember = true;
          }
          if(this.getMembers()[i].ID.indexOf("LayoutSpacer") != -1 && this.getMembers().length == 1) { //to avoid dragging in the same row when there is just one element
            this.draggedIsMember = false;
            rowLength = 6;
          }
        }
        if (this.draggedIsMember) {
          this.setProperty('dropTypes', ['1','2','3','4','5','6']);
        } else {
          if (rowLength == '6') this.setProperty('dropTypes', ['0']);
          else if (rowLength == '5') this.setProperty('dropTypes', ['1']);
          else if (rowLength == '4') this.setProperty('dropTypes', ['1','2']);
          else if (rowLength == '3') this.setProperty('dropTypes', ['1','2','3']);
          else if (rowLength == '2') this.setProperty('dropTypes', ['1','2','3','4']);
          else if (rowLength == '1') this.setProperty('dropTypes', ['1','2','3','4','5']);
          else if (rowLength == '0') this.setProperty('dropTypes', ['1','2','3','4','5','6']);
        }
      }
      this.Super('dropOver');
    },
    dropOut : function () {
      this.isFirstDropOver = true;
      this.Super('dropOut');
    },
    placeHolderProperties:{border:"1px solid #4040ff"},
})


function addEmptyRow(formContainer, position) {
  if (position == null) {
    position = formContainer.getMembers().length-1;
  }
  formContainer.addMember(isc.RowContainer.create({ dropLineThickness:40, layoutMargin: 1 }), position);
}

/*function randomString() {
  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
  var string_length = 12;
  var randomstring = '';
  for (var i=0; i<string_length; i++) {
    var rnum = Math.floor(Math.random() * chars.length);
    randomstring += chars.substring(rnum,rnum+1);
  }
  return randomstring;
}

function addRow(formContainer, position, code) {
  if (position == null) {
    position = formContainer.getMembers().length-1;
  }
  if (code == null) {
    var code=new Array();
    code[0] = new Array();
    code[1] = new Array();
    code[0][0]="Short1.png";
    code[1][0]="Short2.png";
    code[0][1]="3";
    code[1][1]="3";
  }
  alert(code.length);
  var randomID = randomString();
  formContainer.addMember(isc.RowContainer.create({ ID: randomID }), position);
  for (i=0; i<code.length; i++) {
    HStack.getById(randomID).addMember(isc.DragPieceShort.create({src: code[i][0]}));
  }
//  formContainer.addMember(isc.RowContainer.create({ dropLineThickness:40, layoutMargin: 2 }), position);
}*/

function onDrop(destiny) {
  element = isc.Event.getDragTarget();
  destiny.Super('drop');
  if (destiny.getMembers().length == 0) {
    destiny.setProperty('dropLineThickness', 5);
    var memberNum = formContainer.getMemberNumber(destiny);
    addEmptyRow(formContainer, memberNum+1);
    addEmptyRow(formContainer, memberNum);
  }
  cleanEmptyLines();
  return true;
}

function cleanEmptyLines() {
  for (i=0; i< formContainer.getMembers().length; i++) {
   if (formContainer.getMembers()[i].getMembers().length == 1 && 
       formContainer.getMembers()[i].dropLineThickness != 40 && 
       formContainer.getMembers()[i].getMembers()[0].ID.indexOf("LayoutSpacer") != -1) {
     formContainer.getMembers()[i-1].destroy();
     formContainer.getMembers()[i].destroy();
     formContainer.getMembers()[i-1].setProperty('dropLineThickness', 40);
   }
  }
}


isc.VStack.create({
    ID: "formContainer",
    showEdges:true,
    dropLineThickness:4,
    dropLineProperties:{backgroundColor:"#40c040"},
    members:[
        isc.RowContainer.create({
          dropLineThickness:40, layoutMargin: 1
        }),
        isc.RowContainer.create({
          members:[
            isc.DragPieceShort.create({src:"Short1.png"}),
            isc.DragPieceShort.create({src:"Short2.png"})
          ]
        }),
        isc.RowContainer.create({
          dropLineThickness:40, layoutMargin: 1
        }),
        isc.RowContainer.create({
          members:[
            isc.DragPieceShort.create({src:"Short3.png"}),
            isc.DragPieceShort.create({src:"Short4.png"})
          ]
        }),
        isc.RowContainer.create({
          dropLineThickness:40, layoutMargin: 1
        }),
        isc.RowContainer.create({
          members:[
            isc.DragPieceShort.create({src:"Short5.png"})
          ]
        }),
        isc.RowContainer.create({
          dropLineThickness:40, layoutMargin: 1
        }),
        isc.RowContainer.create({
          members:[
            isc.DragPieceLarge.create({src:"Large1.png"})
          ]
        }),
        isc.RowContainer.create({
          dropLineThickness:40, layoutMargin: 1
        }),
        isc.RowContainer.create({
        ID: "test",
          members:[
            isc.DragPieceLarge.create({src:"Large2.png"})
          ]
        }),
        isc.RowContainer.create({
          dropLineThickness:40, layoutMargin: 1
        })
    ]

})


isc.IButton.create({
    title:"Test",
    top: 300,
    click:"alert('Test')"
})

function cleanEmptyLinesAfterTrash() {
  for (i=0; i< formContainer.getMembers().length; i++) {
   if (formContainer.getMembers()[i].getMembers().length == 1 && 
       formContainer.getMembers()[i].dropLineThickness != 40 && 
       formContainer.getMembers()[i].getMembers()[0].ID.indexOf("LayoutSpacer") != -1) {
     formContainer.getMembers()[i].destroy();
     formContainer.getMembers()[i].destroy();
     formContainer.getMembers()[i-1].setProperty('dropLineThickness', 40);
   }
  }
}

isc.HStack.create({
    title:"Test",
    top: 300,
    left: 150,
    canAcceptDrop:true,
    dropLineThickness:0,
    dropOver: function () {
      this.Super('dropOver');
      this.getMembers()[0].setProperty('src','Trash-opened.png');
    },
    dropOut: function () {
      this.Super('dropOut');
      this.getMembers()[0].setProperty('src','Trash-closed.png');
    },

    drop: function () {
      onDrop(this);
      var element = this;
      setTimeout(function() {
        if (element.getMembers()[0].ID.indexOf("Trash") != -1) {
          element.getMembers()[1].destroy();
        } else {
          element.getMembers()[0].destroy();
        }
      }, 10);
    },
/*      this.Super('drop');
      alert(this.getMembers()[1]);
      this.getMembers()[1].destroy();
      cleanEmptyLinesAfterTrash();*/

    members:[
      isc.Img.create({src:"Trash-closed.png", ID:"Trash"}),
    ]
//    click:"alert(HLay.getMembers().length)"
})
</script>
</body>